<@zlt.page styleMacro=styleMacro scriptMacro=scriptMacro>
  <body>
  <div class="layuimini-container">
    <div class="layuimini-main">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
          <div class="layui-card">
            <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>博客访问量统计</div>
            <div class="layui-card-body">
              <div id="echarts-records" style="width: 100%;min-height:300px"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
          <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
              <div class="layui-card">
                <div class="layui-card-header"><i class="fa fa-server icon"></i>服务概况</div>
                <div class="layui-card-body">
                  <#if serviceInfoMap??>
                    <div class="service-state-bar-wrapper">
                      <#list serviceInfoMap?keys as serviceName>
                        <#assign aliveCount =serviceInfoMap[serviceName]!0/>
                        <div class="service-state-bar <#if aliveCount gt 0>alive<#else>die</#if>">
                            ${serviceName}<small> 服务</small><span class="f-r">${aliveCount}<small> 在线</small></span>
                        </div>
                      </#list>
                    </div>
                  <#else>
                  </#if>
                </div>
              </div>
            </div>
            <div class="layui-col-md6">
              <div class="layui-card">
                <div class="layui-card-header"><i class="fa fa-credit-card icon icon-blue"></i>快捷入口</div>
                <div class="layui-card-body">
                  <div class="welcome-module">
                    <div class="layui-row layui-col-space10 layuimini-qiuck">
                      <div class="layui-col-xs3 layuimini-qiuck-module">
                        <a href="javascript:;" layuimini-content-href="/article/save/" data-title="新建文章"
                           data-icon="fas fa-edit">
                          <i class="fas fa-edit"></i>
                          <cite>新建文章</cite>
                        </a>
                      </div>
                      <div class="layui-col-xs3 layuimini-qiuck-module">
                        <a href="javascript:;" layuimini-content-href="/article/list" data-title="文章列表"
                           data-icon="fa fa-window-maximize">
                          <i class="fa fa-window-maximize"></i>
                          <cite>文章列表</cite>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-col-md4">
          <div class="layui-card">
            <div class="layui-card-header"><i class="fa fa-bullhorn icon icon-tip"></i>系统公告</div>
            <div class="layui-card-body layui-text">
              <div class="layuimini-notice">
                <div class="layuimini-notice-title">这是个测试公告</div>
                <div class="layuimini-notice-extra">2019-07-11 23:06</div>
                <div class="layuimini-notice-content layui-hide">
                  这是个测试公告的内容<br>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </body>
</@zlt.page>
<#macro scriptMacro>
  <script>
    layui.use(['layer', 'miniTab', 'echarts'], function () {
      var $ = layui.jquery,
        layer = layui.layer,
        miniTab = layui.miniTab,
        echarts = layui.echarts;

      miniTab.listen();

      /**
       * 查看公告信息
       **/
      $('body').on('click', '.layuimini-notice', function () {
        var title = $(this).children('.layuimini-notice-title').text(),
          noticeTime = $(this).children('.layuimini-notice-extra').text(),
          content = $(this).children('.layuimini-notice-content').html();
        var html = '<div style="padding:15px 20px; text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #2f4056;color: #ffffff">\n' +
          '<div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px"><h4 class="text-danger">' + title + '</h4></div>\n' +
          '<div style="font-size: 12px">' + content + '</div>\n' +
          '</div>\n';
        parent.layer.open({
          type: 1,
          title: '系统公告' + '<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">' + noticeTime + '</span>',
          area: '300px;',
          shade: 0.8,
          id: 'layuimini-notice',
          btn: ['知道了'],
          btnAlign: 'c',
          moveType: 1,
          content: html
        });
      });
    });
  </script>
</#macro>
